<template>
  <div :id="gaugeId" ref="gaugeChart" class="gauge-Chart"></div>
</template>
<script>
import { resizeChart, gaugeOptions } from "@/assets/js/echartOptions.js";
//颜色区间
var colorList = [
  {
    x: 0,
    y: 1,
    x2: 0,
    y2: 0,
    colorStops: [
      {
        offset: 0,
        color: "#7BB2FF", // 0% 处的颜色
      },
      {
        offset: 1,
        color: "#4186FF", // 100% 处的颜色
      },
    ],
  },
  {
    x: 0,
    y: 1,
    x2: 0,
    y2: 0,
    colorStops: [
      {
        offset: 0,
        color: "#7ffd84", // 0% 处的颜色
      },
      {
        offset: 1,
        color: "#1cbe21", // 100% 处的颜色
      },
    ],
  },
  {
    x: 0,
    y: 1,
    x2: 0,
    y2: 0,
    colorStops: [
      {
        offset: 0,
        color: "#ffaa00", // 0% 处的颜色
      },
      {
        offset: 1,
        color: "#fff388", // 100% 处的颜色
      },
    ],
  },
  {
    x: 0,
    y: 1,
    x2: 0,
    y2: 0,
    colorStops: [
      {
        offset: 0,
        color: "#ff3737", // 0% 处的颜色
      },
      {
        offset: 1,
        color: "#ff6543", // 100% 处的颜色
      },
    ],
  },
];

//数据
// var data = {
//   name: "",
//   //0 - 100
//   value: 60,
// };

export default {
  name: "gaugeChart",
  props: {
    // 是否是大一点的饼图
    isLarge: {
      type: Boolean,
      default: false,
    },
    // 饼图id
    gaugeId: {
      type: String,
      default: "gaugeChart",
    },
    // 饼图的颜色
    colors: {
      type: Array,
      default: () => ["#72D4C0", "#EC9DEE", "#F8D68E", "#6CAFFF"],
    },

    // 饼图半径
    radius: {
      type: Array,
      default: () => ["66%", "86%"],
    },
    datas: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      gaugeChart: null,
      // options: option,
    };
  },
  watch: {
    datas(val) {
      this.datas = val;
      this.init();
      // this.gaugeChart.setOption(gaugeOptions({ ...this.options }));
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.gaugeChart = this.$echarts.init(
        document.querySelector(`#${this.gaugeId}`)
      );
      //文本
      var textMap = {
        20: "正常",
        60: "异常",
        90: "故障",
      };

      var option = {
        tooltip: {},
        series: [
          {
            type: "gauge",
            center: ["50%", "70%"],
            splitNumber: 10,
            radius: "100%",
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 100,
            pointer: {
              show: true,
              width: 7,
              length: "80%",
              borderColor: "#000",
              borderWidth: "10",
              itemStyle: {
                color: "auto",
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                width: 10,
                color: [
                  [0.5, colorList[1]],
                  [0.75, colorList[2]],
                  [1, colorList[3]],
                ],
                // borderColor: "#000",
                // borderWidth: "10",
              },
            },
            axisLabel: {
              show: true,
              color: "#fff",
              distance: -50,
              fontSize: 12,
              formatter: function (v) {
                return textMap[v];
              },
            },
            axisTick: {
              show: true,
              splitNumber: 5,
              distance: 5,
            }, //刻度样式
            splitLine: {
              show: true,
              distance: 5,
              lineStyle: {
                color: "#fff",
                width: 2,
              },
            }, //分隔线样式
            detail: {
              show: true,
            },
            title: {
              show: false,
            },

            data: [{ name: "", value: this.datas }],
          },
        ],
      };

      this.gaugeChart.setOption(option);
      resizeChart(this.gaugeChart);
    },
  },
};
</script>
<style lang="less" scoped>
.gauge-Chart {
  height: 100%;
  width: 100%;
  z-index: 9;
}
</style>
